<template>
  <div class="dashboard">
    <!-- 左侧内容 -->
    <div class="top">
      <div class="left-content">
      <!-- 顶部状态统计 -->
      <div class="status-summary">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-content">
                <div class="stat-indicator1"></div>
                <div class="stat-value">31</div>
              </div>
              <div class="stat-label">紧急</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-content">
                <div class="stat-indicator2"></div>
                <div class="stat-value">50</div>
              </div>
              <div class="stat-label">重要</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-content">
                <div class="stat-indicator3"></div>
                <div class="stat-value">2</div>
              </div>
              <div class="stat-label">次要</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-content">
                <div class="stat-indicator4"></div>
                <div class="stat-value">4</div>
              </div>
              <div class="stat-label">提示</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 存储状态和主机状态 -->
      <div class="status-cards">
        <div class="status-row">
          <div class="status-card">
            <div class="status-card-header">
              <div class="el-icon1" style="margin-right: 10px;"></div>
              <span>存储设备状态</span>
            </div>
            <div class="status-card-content">
              <div class="status-card-item">
                <div class="status-card-value1">16</div>
                <div class="status-card-label">正常</div>
                <div class="status-card-value2">0</div>
                <div class="status-card-label">异常</div>
              </div>
            </div>
          </div>

          <!-- FC交换机状态 -->
          <div class="status-card">
            <div class="status-card-header">
              <i class="el-icon2" style="margin-right: 10px;"></i>
              <span>FC交换机</span>
            </div>
            <div class="status-card-content">
              <div class="status-card-item">
                <div class="status-card-value1">2</div>
                <div class="status-card-label">正常</div>
                <div class="status-card-value2">0</div>
                <div class="status-card-label">异常</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 主机状态 -->
        <div class="status-card">
          <div class="status-card-header">
            <i class="el-icon3" style="margin-right: 10px;"></i>
            <span>主机状态</span>
          </div>
          <div class="status-card-content">
            <div class="status-card-item">
              <div class="status-card-value1">123</div>
              <div class="status-card-label">正常</div>
              <div class="status-card-value2">0</div>
              <div class="status-card-label">故障</div>
              <div class="status-card-value3">1</div>
              <div class="status-card-label">无冗余路径</div>
              <div class="status-card-value4">5</div>
              <div class="status-card-label">离线</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 部件状态 -->
    <div class="right-content">
      <div class="component-status">
        <div class="component-title">部件状态</div>
        <div class="component-list">
          <!-- 第一列 -->
          <div class="component-column">
            <!-- 控制器 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">控制器 (72)</div>
                <div class="component-status-text">72/0/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress normal" :style="{ width: '100%' }"></div>
                </div>
              </div>
            </div>

            <!-- 前端端口 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">前端端口 (407)</div>
                <div class="component-status-text">407/0/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress normal" :style="{ width: '100%' }"></div>
                </div>
              </div>
            </div>

            <!-- 后端端口 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">后端端口 (130)</div>
                <div class="component-status-text">130/0/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress normal" :style="{ width: '100%' }"></div>
                </div>
              </div>
            </div>

            <!-- FC交换机端口 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">FC交换机端口 (48)</div>
                <div class="component-status-text">7/41/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress abnormal" :style="{ width: '14.58%' }"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 第二列 -->
          <div class="component-column">
            <!-- 电源 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">电源 (36)</div>
                <div class="component-status-text">35/1/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress warning" :style="{ width: '97.22%' }"></div>
                </div>
              </div>
            </div>

            <!-- BBU -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">BBU (36)</div>
                <div class="component-status-text">36/0/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress normal" :style="{ width: '100%' }"></div>
                </div>
              </div>
            </div>

            <!-- 硬盘 -->
            <div class="component-item">
              <div class="component-info">
                <div class="component-name">硬盘 (2628)</div>
                <div class="component-status-text">2628/0/0</div>
              </div>
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress normal" :style="{ width: '100%' }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <div class="storage">
      <div class="component-title">存储容量分布</div>
      <div class="storage-component">
        <div class="block-storage">
          <div class="component-title">块存储</div>
          <div class="column">
            <div class="storage-info-card">
              <div class="storage-info-header">
                <i class="el-icon-data-analysis"></i>
                <span>存储池概览</span>
              </div>
              <div class="storage-info-content">
                <div class="info-item">
                  <span class="info-label">总容量</span>
                  <span class="info-value">1,000 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">已用容量</span>
                  <span class="info-value">287 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">可用容量</span>
                  <span class="info-value">713 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">使用率</span>
                  <span class="info-value">28.7%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="storage-use">
            <div class="component-title">容量利用率Top5</div>
            <div class="container">
              <div class="progress-container1">
                <span>StoragePool16VQoDc2->5310V5V500R0... 2.87%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '2.87%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>StoragePool16VQoDc3->5310V5V500R0... 2.87%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '2.87%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>StoragePool16VQoDc4->5310V5V500R0... 2.85%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '2.85%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>StoragePool16VQoDc5->5310V5V500R0... 2.83%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '2.83%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>StoragePool16VQoDc6->5310V5V500R0... 2.80%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '2.80%' }"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="file-storage">
          <div class="component-title">文件存储</div>
          <div class="column">
            <div class="storage-info-card">
              <div class="storage-info-header">
                <i class="el-icon-folder"></i>
                <span>文件系统概览</span>
              </div>
              <div class="storage-info-content">
                <div class="info-item">
                  <span class="info-label">总容量</span>
                  <span class="info-value">500 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">已用容量</span>
                  <span class="info-value">142 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">可用容量</span>
                  <span class="info-value">358 TB</span>
                </div>
                <div class="info-item">
                  <span class="info-label">使用率</span>
                  <span class="info-value">28.4%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="storage-use">
            <div class="component-title">磁盘利用率Top5</div>
            <div class="container">
              <div class="progress-container1">
                <span>Disk_001->Huawei.Storage_5600... 85.5%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '85.5%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>Disk_002->Huawei.Storage_5600... 82.3%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '82.3%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>Disk_003->Huawei.Storage_5600... 78.9%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '78.9%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>Disk_004->Huawei.Storage_5600... 75.6%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '75.6%' }"></div>
                  </div>
                </div>
              </div>
              <div class="progress-container1">
                <span>Disk_005->Huawei.Storage_5600... 72.4%</span>
                <div class="progress-bar-container1">
                  <div class="progress-bar1">
                    <div class="progress1" :style="{ width: '72.4%' }"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      dynamicData: {
        controller: 100,
        power: 97.22,
        frontend: 100,
        bbu: 100,
        backend: 100,
        disk: 100,
        fcPort: 14.58
      }
    };
  },
  methods: {
    updateProgress() {
      setInterval(() => {
        this.dynamicData.controller = Math.max(0, Math.min(100, this.dynamicData.controller + Math.random() * 2 - 1));
        this.dynamicData.power = Math.max(0, Math.min(100, this.dynamicData.power + Math.random() * 2 - 1));
        this.dynamicData.frontend = Math.max(0, Math.min(100, this.dynamicData.frontend + Math.random() * 2 - 1));
        this.dynamicData.bbu = Math.max(0, Math.min(100, this.dynamicData.bbu + Math.random() * 2 - 1));
        this.dynamicData.backend = Math.max(0, Math.min(100, this.dynamicData.backend + Math.random() * 2 - 1));
        this.dynamicData.disk = Math.max(0, Math.min(100, this.dynamicData.disk + Math.random() * 2 - 1));
        this.dynamicData.fcPort = Math.max(0, Math.min(100, this.dynamicData.fcPort + Math.random() * 2 - 1));
      }, 3000);
    }
  },
  mounted() {
    this.updateProgress();
  }
};
</script>

<style scoped>
.dashboard {
  background-color: #1a1a1a;
  padding: 10px 20px;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  display: flow;
  gap: 20px;
}
.top{
  display: flex;
  width: 100%;
  gap: 20px;
}

.left-content {
  width: 40%;
  display: flow;
  flex-direction: column;
  gap: 20px;
}

.status-summary {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-indicator1 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff4d4f;
  margin-right: 3px;
}

.stat-indicator2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FFA500;
  margin-right: 3px;
}

.stat-indicator3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FFD700;
  margin-right: 3px;
}

.stat-indicator4 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1E90FF;
  margin-right: 3px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.stat-label {
  font-size: 12px;
  color: #aaa;
  margin-top: 5px;
}

/* 左侧状态卡片 */
.status-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
}

.status-row {
  display: flex;
  gap: 15px;
}

.status-card {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 15px;
  flex: 1;
}

.status-card-header {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.el-icon1 {
  width: 20px;
  height: 20px;
  background-color: #409EFF;
  border-radius: 4px;
  margin-right: 10px;
}

.status-card-content {
  color: #ffffff;
}

.status-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-card-value1 {
  font-size: 25px;
  font-weight: bold;
}

.status-card-value2 {
  font-size: 25px;
  font-weight: bold;
  color: #ff4d4f;
}

.status-card-value3 {
  font-size: 25px;
  font-weight: bold;
  color: #FFA500;
}

.status-card-value4 {
  font-size: 25px;
  font-weight: bold;
  color: #aaa;
}

.status-card-label {
  color: #aaa;
  font-size: 15px;
}

/* 右侧部件状态 */
.right-content {
  width: 60%;
}

.component-status {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 15px;
}

.component-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
}

.component-list {
  display: flex;
  gap: 20px;
}

.component-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.component-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.component-info {
  display: flex;
  justify-content: space-between;
}

.component-name {
  font-size: 14px;
  color: #ffffff;
}

.component-status-text {
  font-size: 14px;
  color: #aaa;
}

.progress-container {
  position: relative;
}

.progress-bar {
  height: 12px;
  background-color: #444;
  border-radius: 6px;
  overflow: hidden;
}

.progress {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress.normal {
  background-color: #52c41a;
}

.progress.warning {
  background-color: #faad14;
}

.progress.abnormal {
  background-color: #f5222d;
}

.storage {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.storage-component {
  display: flex;
  gap: 20px;
}

.block-storage, .file-storage {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.column {
  width: 100%;
}

.storage-info-card {
  background-color: #333;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.storage-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.storage-info-header i {
  font-size: 20px;
  color: #409EFF;
}

.storage-info-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  color: #aaa;
  font-size: 14px;
}

.info-value {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.progress-container1 {
  margin-bottom: 12px;
  background-color: #333;
  padding: 10px;
  border-radius: 6px;
}

.progress-container1 span {
  display: block;
  font-size: 13px;
  color: #ddd;
  margin-bottom: 8px;
}

.progress-bar-container1 {
  width: 100%;
  height: 8px;
  background-color: #444;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar1 {
  height: 100%;
  background-color: #1a73e8;
  border-radius: 4px;
  overflow: hidden;
}

.progress1 {
  height: 100%;
  background: linear-gradient(90deg, #409EFF, #2c7be5);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>